<template>
  <el-card shadow="never">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="columnA" label="所属模型"> </el-table-column>
      <el-table-column prop="columnB" label="模型名称"> </el-table-column>
      <el-table-column prop="columnC" label="模型操作" width="680">
        <template>
          <el-button
            type="primary"
            size="mini"
            @click="
              dialog = true
              dispalyA = true
            "
            >查看数据入库</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="
              dialog = true
              dispalyB = true
            "
            >执行模型</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="
              dialog = true
              dispalyC = true
            "
            >查看生产报告</el-button
          >
          <el-button type="primary" size="mini">查看其他选项</el-button>
          <el-button type="primary" size="mini">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination />
    </div>

    <el-dialog
      title="信息查看"
      :visible.sync="dialog"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div v-if="dispalyA">数据已入Mysql数据库！</div>
      <div v-if="dispalyB">该模型已执行！</div>
      <div v-if="dispalyC">
        报告已生成， <el-link>点击此处进行下载</el-link>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialog = false
            dispalyA = false
            dispalyB = false
            dispalyC = false
            dispalyD = false
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            dialog = false
            dispalyA = false
            dispalyB = false
            dispalyC = false
            dispalyD = false
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      dialog: false,
      dispalyA: false,
      dispalyB: false,
      dispalyC: false,
      dispalyD: false,
      tableData: [
        {
          columnA: '手机用户审计模型',
          columnB: '2020年5G优化'
        },
        {
          columnA: '手机用户审计模型',
          columnB: '2020年新增套餐'
        },
        {
          columnA: '宽带用户审计模型',
          columnB: '2020年专线整改'
        },
        {
          columnA: '宽带用户审计模型',
          columnB: '2020年永久计费'
        },
        {
          columnA: '其他用户审计模型',
          columnB: '全网整体监控'
        },
        {
          columnA: '其他用户审计模型',
          columnB: '审计发现'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin: 10px;
}
</style>
